<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #result {
            width: 400px;
            height: 200px;
            border: solid 2px #14579e;
        }
    </style>
</head>
<body>
<div id="result"></div>

<script>
    const result = document.getElementById("result")

    window.onkeydown = () => {
        // 1.创建对象
        const xhr = new XMLHttpRequest()

        // 2.初始化设置请求方法和URL
        xhr.open("POST", "http://127.0.0.1:8000/server-json")

        // 3.给服务端发送数据
        xhr.send("123")

        // 设置响应头
        // xhr.setRequestHeader("name", "blue")
        // xhr.responseType = "json"

        // 4.事件绑定 处理服务端的结果 0 1 2 3 4
        xhr.onreadystatechange = () => {
            // 判断(服务端返回全部结果)
            if (xhr.readyState === 4) {
                // 判断响应码
                if (200 <= xhr.status && xhr.status < 300) {
                    result.innerText = xhr.response

                    // 转换数据(手动转换)
                    const student = JSON.parse(xhr.response)
                    console.log(student)
                }
            }
        }
    }
</script>
</body>
</html>